import React from "react";
import "./index.scss";
import { Link } from "react-router-dom";
import { Toast } from "antd-mobile";
// 导入百度地图组件
import { Map, Marker, NavigationControl, InfoWindow } from "react-bmapgl";


import {API} from '../../utils/api'
// 导入封装好的NavHeader组件
import NavHeader from "../../components/NavHeader";
import style from "./index.module.css";

// 导入BASE_URL
import {BASE_URL} from '../../utils/url'
import HouseItem from "../../components/HouseItem";

// 覆盖物样式
const labelStyle = {
	cursor: "pointer",
	border: "0px solid rgb(255,0,0)",
	padding: "0",
	whiteSpace: "normal",
	fontSize: "12px",
	color: "rgb(255,255,255)",
	textAlign: "center",
};

class MyMap extends React.Component {
	state = {
		houseList: [],
		// 表示是否要展示房源列表
		isShowList: false,
	};

	componentDidMount() {
		this.initMap();
	}

	initMap() {
		// 获取当前定位城市
		const { label, value } = JSON.parse(localStorage.getItem("ytzf_city"));
		// 注意：在React脚手架中全局对象需要通过window来访问 否则会造成eslint
		const map = new BMap.Map("container");

		// 能够在其他方法中通过this获取地图对象
		this.map = map;

		// 地址解析器实例
		var myGeo = new BMap.Geocoder();
		// 将地址解析结果显示在地图上，并调整地图视野
		myGeo.getPoint(
			label,
			async (point) => {
				if (point) {
					map.centerAndZoom(point, 11);

					// 添加控件
					map.addControl(new BMap.ScaleControl());
					map.addControl(new BMap.NavigationControl());

					// 调用renderOverlays方法
					this.renderOverlays(value);
				}
			},
			label
		);

		// 给地图绑定移动事件
		map.addEventListener("movestart", () => {
			console.log("地图移动了");
			if (this.state.isShowList) {
				this.setState({
					isShowList: false,
				});
			}
		});
	}

	// 渲染覆盖物
	async renderOverlays(id) {
		try {
			// 开启Loading
			Toast.loading("加载中...", 0, null, false);
			const res = await API.get(`/area/map?id=${id}`);
			// 关闭loading
			Toast.hide();
			const data = res.data.body;

			// 调用getTypeAndZoom()方法获取级别和类型
			const { nextZoom, type } = this.getTypeAndZoom();
			data.forEach((item) => {
				// 创建覆盖物
				this.createOverlays(item, nextZoom, type);
			});
		} catch (e) {
			Toast.hidee();
		}
	}
	// 计算要绘制的覆盖物类型和下一个缩放级别
	// 区 =>11 范围：>=10  <12
	// 镇 =>13 范围：>=12 <14
	// 小区 =>14 范围：>=14 <16
	getTypeAndZoom() {
		// 调用地图的getZoom()方法来获取当前缩放级别
		const zoom = this.map.getZoom();
		console.log("当前地图层级", zoom);
		let nextZoom, type;
		if (zoom >= 10 && zoom < 12) {
			// 区级
			nextZoom = 13;
			type = "circle"; //绘制圆形覆盖物
		} else if (zoom >= 12 && zoom < 14) {
			// 镇
			nextZoom = 15;
			type = "circle";
		} else {
			// 小区
			type = "rect";
		}

		return {
			nextZoom,
			type,
		};
	}
	// 创建覆盖物
	createOverlays(data, zoom, type) {
		const {
			coord: { longitude, latitude },
			count,
			label: areaName,
			value,
		} = data;

		// 创建坐标对象
		const areaPoint = new BMap.Point(longitude, latitude);

		if (type === "circle") {
			// 区或镇
			this.createCircle(areaPoint, areaName, count, value, zoom);
		} else {
			// 小区
			this.createRect(areaPoint, areaName, count, value);
		}
	}

	// 创建区镇及覆盖物
	createCircle(point, name, count, id, zoom) {
		const opts = {
			position: point,
			offset: new BMap.Size(-35, -35),
		};
		//  创建Label实例对象
		const label = new BMap.Label("", opts);

		// 给label对象添加唯一标识
		label.id = id;
		// 房源覆盖物
		label.setContent(`
					<div class=${style.bubble}>
						<p class=${style.name}>${name}</p>
						<p>${count}套</p>
					</div>
		`);

		// 设置样式
		label.setStyle(labelStyle);

		label.addEventListener("click", () => {
			console.log(id, zoom);
			// 放大地图
			this.map.centerAndZoom(point, zoom);
			// 调用renderOverlays()方法
			this.renderOverlays(id);

			// 解决清除覆盖物时，百度地图API的js文件自身报错的问题
			setTimeout(() => {
				// 清除覆盖物信息
				this.map.clearOverlays();
			});
		});

		// 添加覆盖物到地图中
		this.map.addOverlay(label);
	}
	// 创建小区覆盖物
	createRect(point, name, count, id) {
		// 创建覆盖物
		const label = new BMap.Label("", {
			position: point,
			offset: new BMap.Size(-50, -28),
		});
		// 给label添加唯一标识
		label.id = id;

		// 设置房源覆盖物
		label.setContent(`
			<div class='${style.rect}'>
				<span class'${style.housename}'>${name}</span>
				<span class'${style.housenum}'>${count}套</span>
				<i class='${style.arrow}'></i>
			</div>
		`);
		// 设置样式
		label.setStyle(labelStyle);

		// 添加单击事件
		label.addEventListener("click", (e) => {
			this.getHouseList(id);
			const target = e.changedTouches[0];
			console.log(target);

			this.map.panBy(
				window.innerWidth / 2 - target.clientX,
				(window.innerHeight - 330) / 2 - target.clientY
			);
		});

		// 添加覆盖物到地图
		this.map.addOverlay(label);
	}

	async getHouseList(id) {
		try {
			// 开启Loading
			Toast.loading("加载中...", 0, null, false);
			const res = await API.get(`/houses?cityId=${id}`);
			Toast.hide();
			this.setState({
				houseList: res.data.body.list,
				isShowList: true,
			});
		} catch (e) {
			Toast.hide()
		}
	}
	// 渲染房屋列表的方法
	renderHouseList() {
		return this.state.houseList.map((item) => (
			<HouseItem key={item.houseCode} src={BASE_URL+item.houseImg}
			title={item.title} desc={item.desc} tags={item.tags} price={item.price}
			/>
		));
	}

	render() {
		return (
			<div className="map">
				{/* 顶部导航栏 */}
				<NavHeader>地图找房</NavHeader>

				{/* 地图的容器 */}
				<div id="container"></div>

				{/* 房源列表 */}
				<div
					className={[
						style.houseList,
						this.state.isShowList ? style.show : "",
					].join(" ")}
				>
					<div className={style.titleWrap}>
						<h1 className={style.listTitle}>房屋列表</h1>
						<Link className={style.titleMore} to="home/list">
							更多房源
						</Link>
					</div>

					<div className={style.listInfo}>
						<div className={style.houseItem}>
							{/* 房屋结构 */}
							{this.renderHouseList()}
						</div>
					</div>
				</div>
			</div>
		);
	}
}
export default MyMap;
